<template>
  <div class="page-container">
    <div ref="chart" class="container-charts"></div>
  </div>
</template>

<script>
// import { init } from 'echarts'
// 引入封装好的接口
import { plantingAreaTop } from "../request/api";
export default {
  data() {
    return {
      //   plantList:[],
      //yData:[]
    };
  },
  mounted() {
    //组件一加载执行初始化
    this.init();
  },
  methods: {
    //封装一个初始化的函数
    async init() {
      //5、调用种植接口
      // plantingAreaTop()
      // .then(res=>{
      //     console.log(res,'66666')
      //     this.plantList = res.data
      //     console.log(this.plantList,'9999')
      // })
      let result = await plantingAreaTop();
      console.log(result, "reuslut");
      //数据排序实际就是数组的排序 sort
      //如果你的数组是[1,2,3,4] sort()  [{name:xx},{name:xx},,{name:xx},] sort(funtion(a,b){return a.name-b.name})  a,b是相邻的两个值  a.name-b.name 从大到小 b.name-a.name
      //排序
      result.data.sort((a, b) => {
        return a.area - b.area;
      });
      let yData = result.data.map((item) => item.name);
      let sData = result.data.map((item) => item.area);
      //console.log(yData)
      //1、获取图表容器节点
      let chart = this.$refs.chart;
      //2、初始化 echarts
      let myChart = this.$echart.init(chart);
      //3、初始化配置项
      let options = {
        //3.1标题
        title: {
          //主标题内容
          text: "各地区种植面积统计Top10",
          //改变主标题的位置 图表距离容器的位置
          /* 
                 1、利用数值的方式  eg:200
                 2、百分比的方式 eg:"20%"
                 3、值  左右只能  ： left center right  上下： top middle bottom
                */
          left: 20,
          //right:20
          top: 20,
          //bottom
         //  文本的样式
         textStyle:{
            fontSize:30
         }
        },
        grid:{
          left:"3%",
          top:"10%",
          right:"10%",
          bottom:"10%"
        },
        //3.2 x轴
        xAxis: {
          type: "value", //坐标轴类型。 'value' 数值轴，适用于连续数据。
          axisLine: {
            //是否显示坐标轴轴线。
            //数据线
            show: true,
          },
          axisTick: {
            //是否显示坐标轴刻度。
            //刻度
            show: true,
          },
        },
        //3.3 y轴
        yAxis: {
          type: "category",
          //data: ["小米", "玉米", "黄瓜", "小豆"],
          data: yData,
        },
        //3.5 是否显示提示框组件。
        tooltip: {
          show: true,
        },
        //3.6坐标轴指示器
        axisPointer: {
          show: true,
          type: "shadow",
        },
        //3.7工具栏
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {
              //下载图片
              show: true,
            },
            restore: {
              //还原
              show: true,
            },
            dataView: {
              //数据视图
              show: true,
            },
            magicType: {
              type: ["line", "bar"],
            },
          },
        },
        //3.4 数据列
        series: [
          {
            type: "bar", //柱状图
            //data: [19, 40, 60, 70], //每一个柱状图的数据
            data: sData,
            label: {
              //是否显示标签。
              show: true,
              // color:'green',
              //  fontSize:40
              position: "right",
            },
            itemStyle:{
                // 每一项的样式
                color:{
                    // 自定义颜色 在echarts中线性渐变有4个值，起：x,y 止 x2,y2
                    type:"linear",//线性
                    x:0,
                    y:0,
                    x2:1,
                    y2:0,
                    colorStops:[
                        // 颜色起始
                        {
                          offset:0,
                          color:"#eaff56"
                        },
                        {
                          offset:1,
                          color:"#bce672"
                        }
                    ]
                     
                }
            }
          },
        ],
      };
      //4、给echart 设置配置项内容
      myChart.setOption(options);
    },
  },
};
</script>

<style>
</style>